<template>
  <div class="content">
    <div class="content_left">
      <div class="title">
        <img src="http://www-wms-java.itheima.net/img/title.ef005a7a.png" />
      </div>
      <el-form :model="ruleForm" ref="ruleForm" style="margin: 0 auto">
        <el-form-item
          style="height: 100px; margin-left: 59px; padding-top: 59px"
        >
          <el-input
            v-model="ruleForm.username"
            autocomplete="off"
            style="width: 280px; height: 50px"
            placeholder="请输入用户名"
          >
            <template #prepend>
              <div class="username">
                <img src="@/assets/shouji.png" alt="" />
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          style="height: 60px; margin-left: 59px; padding-top: 20px"
        >
          <el-input
            :type="isShow ? 'text' : 'password'"
            v-model="ruleForm.password"
            autocomplete="off"
            style="width: 280px; height: 50px"
            placeholder="请输入密码"
          >
            <template #prepend>
              <div class="username">
                <img src="@/assets/suo.png" alt="" />
              </div>
            </template>
            <template #suffix>
              <div class="eyes">
                <i
                  class="iconfont"
                  :class="isShow ? 'icon-zhengyan' : 'icon-biyan'"
                  @click="isShow = !isShow"
                ></i>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-left: 59px">
          <el-checkbox v-model="checked">记住密码</el-checkbox>
        </el-form-item>
      </el-form>
      <div style="text-align: center"><el-button @click="$router.push('/')">确认登录</el-button></div>
    </div>
    <div class="content_right"></div>
  </div>
</template>

<script>
export default {
  name: 'PageLogin',
  data () {
    return {
      ruleForm: {
        username: 'admin',
        password: '111111'
      },
      isShow: false
    }
  }
}
</script>

<style lang="scss" scoped>
  .content {
    width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    border-radius: 40px;
    .el-button--default {
      width: 280px;
      height: 50px;
      background: #ffb200;
      border-radius: 8px;
      box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
      font-size: 16px;
      font-weight: 600;
      text-align: center;
      color: #332929;
      line-height: 22px;
    }
    .content_left {
      float: left;
      width: 398px;
      height: 516px;
      background: #fff;
      border-radius: 40px 0 0 40px;
      margin: 0 auto;
      .eyes {
        height: 100%;
        line-height: 50px;
        margin-right: 4px;
      }
      .title {
        margin-left: 124px;
        margin-top: 72px;
        img {
          width: 150px;
          height: 64px;
        }
      }
      ::v-deep .el-input__inner {
        background-color: #f8f5f5;
        height: 100%;
        border: 1px solid #f8f5f5;
        &:focus {
          border-color: #ffb200;
        }
        &:hover {
          border-color: #ccc;
        }
      }
      ::v-deep .el-input-group__prepend {
        padding: 0;
        border: 0;
        background-color: #eae7e7;
        .username {
          width: 50px;
          height: 50px;
          border-radius: 8px 0 0 8px;
          img {
            width: 25px;
            height: 24px;
            margin: 12px 13px;
          }
        }
      }
    }
    .content_right {
      float: right;
      background-image: url('http://www-wms-java.itheima.net/img/contentBg.1321d126.png');
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      width: 560px;
      height: 516px;
    }
  }
</style>
